import React from 'react'
import { Card,Button,Form,Input,message,Icon,Checkbox } from 'antd'
import './../../style/ui.less'

class FormLogin extends React.Component{

    handleSubmit = () => {
        let userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err,values) => {
            if (!err) {
                message.success(`${userInfo.userName} 通过验证`)
            }
        })
    }

    render(){
        const { getFieldDecorator } = this.props.form
        return (
            <div>
                <Card title="登录行内表单" className="card-wrap">
                    <Form layout="inline">
                        <Form.Item>
                            <Input placeholder="请输入用户名"/>
                        </Form.Item>
                        <Form.Item>
                            <Input placeholder="请输入用户名"/>
                        </Form.Item>
                        <Form.Item>
                            <Button type={"primary"}>登录</Button>
                        </Form.Item>
                    </Form>
                </Card>

                <Card title="登录水平表单" className="card-wrap">
                    <Form style={{width:300}}>
                        <Form.Item>
                            {
                                getFieldDecorator('userName',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'用户名不能为空!'
                                        },
                                        {
                                            min:5,max:36,
                                            message:'长度不在范围内!'
                                        },
                                        {
                                            pattern:/^\w+$/g, // new RegExp('^\\w+$','g')
                                            message:'用户必需为英文字母或数字!'
                                        }
                                    ]
                                })(
                                    <Input prefix={<Icon type="user"/>} placeholder="请输入用户名"/>
                                )
                            }

                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('password',{
                                    initialValue:'',
                                    rules:[]
                                })(
                                    <Input prefix={<Icon type="lock"/>} placeholder="请输入用户名"/>
                                )
                            }

                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('remember', {
                                valuePropName: 'checked',
                                initialValue: true,
                            })(
                                <Checkbox>记住我</Checkbox>
                            )}
                            <a href="" style={{float:'right'}}>忘记密码</a>
                        </Form.Item>
                        <Form.Item>
                            <Button type={"primary"} onClick={this.handleSubmit}>登录</Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        );
    }
}

export default Form.create()(FormLogin)